<template>
    <!-- 靓号信息展示组件 -->
    <div class="top-panel">
        <el-form :model="searchForm" label-width="70px" label-position="right">
            <el-row>
                <el-col :span="5">
                    <el-form-item label="靓号" label-width="50px">
                        <el-input class="password-input" v-model="searchForm.userId" clearable placeholder="支持模糊搜索"
                            @keyup.enter="loadDataList"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="邮箱">
                        <el-input class="password-input" v-model="searchForm.email" clearable placeholder="支持模糊搜索"
                            @keyup.enter="loadDataList"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="7" :style="{ paddingLeft: '70px' }">
                    <el-button type="success" @click="loadDataList">查询</el-button>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="editAccount">新增靓号</el-button>
                </el-col>
                <el-col :span="1">
                    <div class="iconfont icon-shuaxin" style="padding-top: 7px;" @click="loadDataList"></div>
                </el-col>
            </el-row>
        </el-form>
    </div>
    <Table :columns="columns" :fetch="loadDataList" :dataSource="tableData" :options="tableOptions">
        <template #slotStatus="{ row }">
            <span style="color: blue" v-if="row.status == 0 || row.status == 'NOT_USED'">未使用</span>
            <span style="color: red" v-else>已使用</span>
        </template>
        <template #slotOperation="{ row }">
            <el-dropdown placement="bottom-end" trigger="click">
                <span class="iconfont icon-gengduo"></span>
                <template #dropdown>
                    <el-dropdown-item @click="editAccount(row)"
                        v-if="row.status == 0 || row.status == 'NOT_USED'">修改</el-dropdown-item>
                    <el-dropdown-item @click="delAccount(row)">删除</el-dropdown-item>
                </template>
            </el-dropdown>
        </template>
    </Table>
    <BeautyAccountEdit ref="beautyAccountEditRef" @reload="loadDataList"></BeautyAccountEdit>
</template>

<script setup>
import BeautyAccountEdit from "./BeautyAccountEdit.vue";
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue"
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const tableData = ref({})
const tableOptions = {}
const columns = [
    {
        label: '邮箱',
        prop: 'email'
    },
    {
        label: '靓号',
        prop: 'userId'
    },
    {
        label: '状态',
        prop: 'status',
        scopedSlots: 'slotStatus'
    },
    {
        label: '操作',
        prop: 'operation',
        scopedSlots: 'slotOperation'
    }
]

const beautyAccountEditRef = ref(null)
const editAccount = (row) => {
    beautyAccountEditRef.value.show(Object.assign({}, row))
}

const searchForm = ref({})

const loadDataList = async () => {
    let params = {
        pageNo: tableData.value.pageNo,
        pageSize: tableData.value.pageSize
    }
    params = Object.assign(params, searchForm.value)
    let result = await proxy.Request({
        url: proxy.Api.loadBeauty,
        params: params
    })
    if (!result) {
        return;
    }
    Object.assign(tableData.value, result.data)
}

const delAccount = (data) => {
    proxy.Confirm({
        message: `确定删除邮箱【${data.email}】对应的靓号【${data.userId}】吗？`,
        okFun: async () => {
            let result = await proxy.Request({
                method: "delete",
                url: proxy.Api.delBeauty,
                params: {
                    id: data.id
                }
            })
            if (!result) {
                return;
            }
            proxy.Message.success("靓号信息删除成功")
            loadDataList()
        }
    })
}
</script>

<style lang="scss" scoped></style>
